import './WijmoA02.scss'

import { getData } from "../Data"

import { useState } from "react"
import { useMount, useReactive } from "ahooks"
import { FlexGrid } from "@grapecity/wijmo.react.grid"


const WijmoA02 = () => {
    const [Data, setData] = useState([])

    const initData = useReactive({
        rowCount: 0,
        cellCount: 0
    })
    const init = (e) => {
        initData.rowCount = e.rows.length.toString()
        initData.cellCount = e.hostElement.querySelectorAll(".wj-cell").length.toString()
        e.updatedView.addHandler(s => {
            initData.rowCount = s.rows.length.toString()
            initData.cellCount = s.hostElement.querySelectorAll(".wj-cell").length.toString()
        })
        e.scrollPositionChanged.addHandler(s => {
            if (s.viewRange.bottomRow >= s.rows.length - 10) {
                const view = s.collectionView;
                const index = view.currentPosition
                setData(e => ([...e, ...getData(100)]))
                view.refresh();
                view.currentPosition = index;
            }
        })
    }
    useMount(() => {


        setData(e => ([...e, ...getData(100)]))
    })


    return (
        <div className="Page WijmoA02">
            {Data && <FlexGrid initialized={init} itemsSource={Data} />}
            <div>
                <div>rowCount : {initData.rowCount}</div>
                <div>cellCount : {initData.cellCount}</div>
                <div>
                    设置滚动条 : .wj-flexgrid [wj-part=root] =  overflow: hidden !important;
                </div>
            </div>
        </div>
    );
};

export default WijmoA02;